<template>
  <div class="announcement-page">
    <div class="page-header">
      <h1>系统公告</h1>
      <div class="header-actions">
        <a-button @click="handleRefresh">
          <template #icon>
            <ReloadOutlined />
          </template>
          刷新
        </a-button>
      </div>
    </div>

    <!-- 公告列表 -->
    <AnnouncementList
      ref="announcementListRef"
      @unread-count-change="handleUnreadCountChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
import AnnouncementList from '@/components/AnnouncementList.vue'

const announcementListRef = ref()

const handleRefresh = () => {
  announcementListRef.value?.refresh()
}

const handleUnreadCountChange = (count: number) => {
  // 可以在这里处理未读数量变化，比如更新全局状态
  console.log('未读公告数量:', count)
}
</script>

<style scoped>
.announcement-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.page-header {
  background: #fff;
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.header-actions {
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .page-header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* 黑暗模式适配 */
[data-theme="dark"] .announcement-page {
  background: #141414;
  color: #ffffff;
}

[data-theme="dark"] .page-header {
  background: #1f1f1f;
  border-color: #404040;
}

[data-theme="dark"] .page-title {
  color: #ffffff;
}

[data-theme="dark"] .page-description {
  color: #d1d5db;
}

[data-theme="dark"] .announcement-content {
  background: #1f1f1f;
  border-color: #404040;
}
</style>
